<template>
  <Head />
  <div class="main">
    <div class="home">
      <img src="@/assets/images/level.png" alt="" />
      <div class="content">
        <span class="label">{{ $t("myLevel") }}</span>
        <span class="num">{{
          userStore().info.user.level == 1
            ? `${$t("generalUser")}`
            : `(S${Number(userStore().info.user.level) - 1}) VIP`
        }}</span>
      </div>
    </div>
    <div class="team">
      <div class="team-item">
        <img :src="getAssetsFile(`team_01.png`)" alt="" />
        <div class="content">
          <span class="label">{{ $t("directPushNum") }}</span>
          <span class="value">{{ teamInfo.recommendNum }}</span>
        </div>
      </div>
      <div class="team-item">
        <img :src="getAssetsFile(`team_02.png`)" alt="" />
        <div class="content">
          <span class="label">{{ $t("teamNum") }}</span>
          <span class="value">{{ teamInfo.teamNum }}</span>
        </div>
      </div>
      <div class="team-item">
        <img :src="getAssetsFile(`team_03.png`)" alt="" />
        <div class="content">
          <span class="label">{{ $t("teamPerformance") }}</span>
          <span class="value">{{ teamInfo.teamPerformance }}</span>
        </div>
      </div>
    </div>
    <div class="title">{{ $t("directPushList") }}</div>
    <div class="direct-push-list">
      <div
        v-for="(item, index) in directPushList"
        :key="index"
        class="direct-push-item"
      >
        <div class="title">{{ formatAddress(item.address) }}</div>
        <div class="level">
          <span>{{ $t("level") }}</span>
          <span>{{
            item.level == 1
              ? `${$t("generalUser")}`
              : `(S${Number(item.level) -  1}) VIP`
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from "@/utils/tool";
import { Async_myTeam, Async_recommend } from "@/server/user";
import { userStore } from "@/stores/modules/user";
import { ITeamInfo, IDirectPushItem } from "@/model/user";
import { formatAddress } from "@/utils/kit";

const teamInfo = ref<ITeamInfo>({
  recommendNum: 0,
  teamNum: 0,
  teamPerformance: 0
});
const directPushList = ref<IDirectPushItem[]>();

const getMyTeam = async () => {
  try {
    let res: ITeamInfo = await Async_myTeam();
    if (res) {
      teamInfo.value = res;
    }
  } catch (error) {
    console.error(error);
  }
};

const getRecommend = async () => {
  try {
    let { list }: any = await Async_recommend({
      page: 0,
      size: 999
    });
    if (list) {
      directPushList.value = list || [];
    }
  } catch (error) {
    console.error(error);
  }
};
onMounted(() => {
  getMyTeam();
  getRecommend();
});
</script>
<style scoped lang="scss">
.main {
  padding: 12px;
}
.home {
  display: flex;
  justify-content: flex-start;
  background: linear-gradient(to right, #1c0134, #212236);
  border-radius: 6px;
  padding: 30px;
  img {
    height: 60px;
    margin-right: 12px;
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .label {
      font-size: 15px;
      color: #c2b3d2;
    }
    .num {
      font-size: 18px;
      color: #fff;
    }
  }
}
.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0;
  .team-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #212234;
    padding: 12px 20px;
    border-radius: 6px;
    img {
      height: 40px;
      margin-right: 12px;
    }
    .content {
      display: flex;
      flex-direction: column;
      .label {
        font-size: 14px;
        color: #666;
      }
      .value {
        font-size: 18px;
        color: #fff;
      }
    }
  }
}
.title {
  font-size: 18px;
  line-height: 18px;
  color: #ddd;
  font-weight: bold;
  margin-bottom: 12px;
}
.direct-push-list {
  .direct-push-item {
    background: #212234;
    margin-bottom: 12px;
    border-radius: 6px;
    padding: 12px 16px;
    .title {
      font-size: 14px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(50, 50, 50, 0.5);
    }
    .level {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        &:nth-child(1) {
          color: #999;
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #ddd;
        }
      }
    }
  }
}
</style>
